<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>flati | responsive html5 template | themeforest | josweb</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<link href='http://fonts.googleapis.com/css?family=Lato:400,700,300' rel='stylesheet' type='text/css'>
<!--[if IE]>
	<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Lato:400" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Lato:700" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet" type="text/css">
<![endif]-->

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/theme.css" rel="stylesheet">
<link href="css/colour.css" rel="stylesheet" type="text/css"/>
<link href="css/zocial.css" rel="stylesheet" type="text/css"/>

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>
<!--header-->
	<div class="header">
<!--menu-->
    <nav id="main_menu" class="navbar" role="navigation">
      <div class="container">
            <div class="navbar-header">
        <!--toggle-->
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
				<i class="fa fa-bars"></i>
			</button>
		<!--logo-->
			<div class="logo">
				<a href="index.html"><img src="img/logo.png" alt="" class="animated bounceInDown" /></a> 
			</div>
		</div>
           
            <div class="collapse navbar-collapse" id="menu">
                <ul class="nav navbar-nav pull-right">
                   			<li class="dropdown"><a href="javascript:{}">Home</a> 
							<ul class="dropdown-menu">
							<li><a href="index.html">Slider Revolution</a></li>
							<li><a href="index2.html">Nerve Slider</a></li>
							<li><a href="index3.html">NivoSlider</a></li>
							<li><a href="index4.html">Slides</a></li>
							<li><a href="index5.html">Html5 Video</a></li>
						</ul>
							</li>
							<li class="dropdown active"><a href="javascript:{}">Pages</a>
						<ul class="dropdown-menu">
								<li><a href="team.html">The Team</a></li>
								<li><a href="about.html">About</a></li>
								<li><a href="services.html">Services</a></li>
								<li><a href="testimonials.html">Testimonials</a></li>
								<li><a href="timeline.html">Timeline</a></li>
								<li><a href="full.html">Full Width</a></li>
								<li><a href="left_sidebar.html">Left Sidebar</a></li>
								<li><a href="right_sidebar.html">Right Sidebar</a></li>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Work</a>
						<ul class="dropdown-menu">
								<li><a href="portfolio_2columns.html">2 Columns</a></li>
								<li><a href="portfolio_3columns.html">3 Columns</a></li>
								<li><a href="portfolio_4columns.html">4 Columns</a></li>
								<li><a href="portfolio_masonry.html">Masonry</a></li>
								<li><a href="gallery.html">Paginated Gallery</a></li>
								<li><a href="video_gallery.html">Video Gallery</a></li>
								<li><a href="single_portfolio.html">Single Slider</a></li>
								<li><a href="single_video.html">Single Video</a></li>
								<li><a href="single_image.html">Single Image</a></li>
								<li><a href="full_slider.html">Full Slider</a></li>
								<li><a href="full_video.html">Full Video</a></li>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Style</a>
						<ul class="dropdown-menu">
								<li><a href="scaffolding.html">Scaffolding</a></li>
								<li><a href="shortcodes.html">Shortcodes</a></li>
								<li><a href="icons.html">Icons</a></li>
								<li><a href="script_examples.html">JS Examples</a></li>
								<li><a href="javascript:{}">Sub Menu</a>
							<ul class="dropdown-menu sub-menu">
								<li><a href="#">Sub One</a></li>
								<li><a href="#">Sub Two</a></li>
								<li><a href="#">Sub Three</a></li>
								<li><a href="#">Sub Four</a></li>
							</ul>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Extras</a>
						<ul class="dropdown-menu">
								<li><a href="dribbble_stream.html">Dribbble Stream</a></li>
								<li><a href="alt_footer.html">Alt. Footer & Boxes</a></li>
								<li><a href="pricing_table.html">Pricing Table</a></li>
								<li><a href="404.html">404 Page</a></li>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Blog</a>
						<ul class="dropdown-menu">
								<li><a href="blog.html">Blog</a></li>
								<li><a href="blog_two.html">Blog II</a></li>
								<li><a href="blog_post.html">Blog Post</a></li>
								<li><a href="blog_post2.html">Blog Post II</a></li>
						</ul>
							</li>
							<li><a href="contact.html">Contact</a></li>
						</ul>
					</div>
				</div>
			</nav>
		</div>
	<!--//header-->
	
	<!--page-->
	<div id="banner">
		<div class="container intro_wrapper">
			<div class="inner_content">
				<h1>Layout</h1>
					<h1 class="title">Full Width &amp; Columns</h1>
						<h1 class="intro">
							Web design is the creation of <span class="hue">digital environments</span>, that <span>facilitate</span> and encourage human activity; 
							<span>reflect </span> or adapt to individual voices and content. - Jeffrey Zeldman
						</h1>
					</div>
				</div>
			</div>
		<div class="container wrapper pad30">
	<div class="inner_content">
		<div class="row">
			<div class="col-md-12 pad15">
			
			 <div id="nslider" class="nivoSlider"> 
			<!-- add your images here -->
                	<img src="img/large/full_project2.jpg" alt="" title="#nivocaption1" />
                	<img src="img/large/full_project1.jpg" alt="" title="#nivocaption2" />
				</div>
			<!-- add your captions here -->
					<div id="nivocaption1" class="nivo-html-caption">Caption One</div>
					<div id="nivocaption2" class="nivo-html-caption">Caption Two</div>
					
				</div>
			</div>
			<div class="row pad30">
				<div class="col-md-6">
					<p>
						<span class="dropcap">S</span>Solum consetetur conclusionemque ea eum, quem iriure consetetur nam et. Nec enim quando eloquentiam ne, ad mea simul utinam. 
						His persius intellegam dissentias et. Veniam blandit an sed. Per bonorum dolores posidonium id, nam eu prima.orem ipsum dolor sit amet, doming ullamcorper vix no, 
						hinc dictas percipitur pri ea, nam eu prima.
					</p>
				</div>
					
				<div class="col-md-6">
					<p>
						<span class="dropcap2">O</span>Solum consetetur conclusionemque ea eum, quem iriure consetetur nam et. Nec enim quando eloquentiam ne, ad mea simul utinam. 
						His persius intellegam dissentias et. Veniam blandit an sed. Per bonorum dolores posidonium id, nam eu prima.orem ipsum dolor sit amet, doming ullamcorper vix no, 
						hinc dictas percipitur pri ea, nam eu prima.
					</p>
				</div>
					</div>				

			<div class="row">
				<hr class="team-line">
					
				<div class="col-md-12">
					<h2><span>h2 heading</span></h2>
				</div>
					<div class="col-md-4">
					<h6><span>1/3</span> - one-third</h6>
					<p>
						Solum consetetur conclusionemque ea eum, quem iriure consetetur nam et. Nec enim quando eloquentiam ne. Per bonorum dolores posidonium id, nam eu prima.orem ipsum dolor 
						sit amet, doming ullamcorper vix no, hinc dictas.
					</p>
				</div>
				
				<div class="col-md-8">
					<h6><span>2/3</span> - two-thirds</h6>
					<p>
						Solum consetetur conclusionemque ea eum, quem iriure consetetur nam et. Nec enim quando eloquentiam ne, ad mea simul utinam. His persius intellegam dissentias et. 
						Veniam blandit an sed. Per bonorum dolores posidonium id, nam eu prima. Per bonorum dolores posidonium id, nam eu prima.orem ipsum dolor sit amet, doming ullamcorper vix no, 
						hinc dictas percipitur pri ea, nam eu prima.orem ipsum dolor sit amet reque percipitur.
					</p>
				</div>
				
				<div class="col-md-12"><h3>
					<span>h3 heading</span></h3>
				</div>
				<div class="col-md-8">
					<h6><span>2/3</span> - two-third</h6>
					<p>
						Solum consetetur conclusionemque ea eum, quem iriure consetetur nam et. Nec enim quando eloquentiam ne, ad mea simul utinam. His persius intellegam dissentias et. 
						Veniam blandit an sed. Per bonorum dolores posidonium id, nam eu prima. Per bonorum dolores posidonium id, nam eu prima.orem ipsum dolor sit amet, doming ullamcorper vix no, 
						hinc dictas percipitur pri ea, nam eu prima.orem ipsum dolor sit amet reque percipitur.
					</p>
				</div>
				
				<div class="col-md-4">
					<h6><span>1/3</span> - one-third</h6>
					<p>
						Solum consetetur conclusionemque ea eum, quem iriure consetetur nam et. Nec enim quando eloquentiam ne. Per bonorum dolores posidonium id, nam eu prima.orem ipsum dolor 
						sit amet, doming ullamcorper vix no, hinc dictas.
					</p>
				</div>
				
			<div class="clear"></div>
					<div class="col-md-12">
						<h4><span>h4 heading</span></h4>
					</div>
					<div class="col-md-3">
					<h6><span>1/4</span> - one quarter</h6>
					<p>Solum consetetur conclusionemque ea eum, quem iriure consetetur.Veniam blandit an sed. Per bonorum dolores posidonium id.</p>
				</div>
				
				<div class="col-md-9">
					<h6><span>3/4</span> - three-quarters</h6>
					<p>
						Solum consetetur conclusionemque ea eum, quem iriure consetetur nam et. Nec enim quando eloquentiam ne, ad mea simul utinam. His persius intellegam dissentias et. 
						Veniam blandit an sed. Per bonorum dolores posidonium id, nam eu prima. Per bonorum dolores posidonium id, nam eu prima.orem ipsum dolor sit amet, doming ullamcorper vix no, 
						hinc dictas percipitur pri ea, nam eu prima.orem ipsum dolor.
					</p>
				</div>
				
			<div class="clear"></div>
				 <div class="col-md-12">
					<h5><span>h5 heading</span></h5>
				</div>
				<div class="col-md-9">
					<h6><span>3/4</span> - three-quarters</h6>
					<p>
						Solum consetetur conclusionemque ea eum, quem iriure consetetur nam et. Nec enim quando eloquentiam ne, ad mea simul utinam. His persius intellegam dissentias et. 
						Veniam blandit an sed. Per bonorum dolores posidonium id, nam eu prima. Per bonorum dolores posidonium id, nam eu prima.orem ipsum dolor sit amet, doming ullamcorper vix no, 
						hinc dictas percipitur pri ea, nam eu prima.orem ipsum dolor.
					</p>
				</div>
				
				<div class="col-md-3">
					<h6><span>1/4</span>  - one quarter</h6>
					<p>Solum consetetur conclusionemque ea eum, quem iriure consetetur.Veniam blandit an sed. Per bonorum dolores posidonium id.</p>
				</div>
				
			<div class="clear"></div>
				 <div class="col-md-12">
				<h6><span>h6 heading</span></h6></div>
				<div class="col-md-3">
					<h6><span>1/4</span> - one quarter</h6>
					<p>Solum consetetur conclusionemque ea eum, quem iriure consetetur.Veniam blandit an sed. Per bonorum dolores posidonium id.</p>
				</div>
				
				<div class="col-md-3">
					<h6><span>1/4</span> - one quarter</h6>
					<p>Solum consetetur conclusionemque ea eum, quem iriure consetetur.Veniam blandit an sed. Per bonorum dolores posidonium id.</p>
				</div>
				
				<div class="col-md-3">
					<h6><span>1/4</span> - one quarter</h6>
					<p>Solum consetetur conclusionemque ea eum, quem iriure consetetur.Veniam blandit an sed. Per bonorum dolores posidonium id.</p>
				</div>
				
				<div class="col-md-3">
					<h6><span>1/4</span> - one quarter</h6>
					<p>Solum consetetur conclusionemque ea eum, quem iriure consetetur.Veniam blandit an sed. Per bonorum dolores posidonium id.</p>
				</div>
				</div>
			</div>
		</div>
		<div class="pad45 hidden-md hidden-lg"></div>
		<!--//page-->
		
		<!-- footer-->
		<div id="footer2">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
				<div class="copyright">
							FLATI
							&copy;
							<script type="text/javascript">
							//<![CDATA[
								var d = new Date()
								document.write(d.getFullYear())
								//]]>
								</script>
							 - All Rights Reserved :
							Template by <a href="http://spiralpixel.com">Spiral Pixel</a>
						</div>
						</div>
					</div>
				</div>
					</div>
					<!-- up to top -->
				<a href="#"><i class="go-top fa fa-angle-double-up"></i></a>
				<!--//end--> 
				
<script src="js/jquery.js"></script>				
<script src="js/jquery.nivo.slider.pack.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/retina.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<script type="text/javascript">
		//<![CDATA[
			$(document).ready(function () {
				$('.nivoSlider').nivoSlider({
				effect: 'fade',
				animSpeed: 500,
				pauseTime: 3000,
				directionNav: true,
				controlNav: false,
				pauseOnHover: true
			});
		});
	//]]>
</script>
</body>
</html>